<script setup lang="ts">
import { getCategoryTopAPI, getHomeBannerAPI } from '@/services'
import type { BannerItem, CategoryTopItem } from '@/types'
import { onLoad } from '@dcloudio/uni-app'
import type { ScrollViewOnScroll } from '@uni-helper/uni-app-types'
import { computed, ref, nextTick } from 'vue'
import PageSkeleton from './components/PageSkeleton.vue'

// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getBannerList = async () => {
  const res = await getHomeBannerAPI(2)
  bannerList.value = res.result
}

// 获取分类列表数据
const categoryList = ref<CategoryTopItem[]>([])
const getCategoryTopList = async () => {
  const res = await getCategoryTopAPI()
  categoryList.value = res.result
}

// 切换Tab栏，二级分类置顶
const activeIndex = ref(0)
const scrollViewTop = ref(0)
const scrollTop = ref(0)
const onScroll: ScrollViewOnScroll = (e) => {
  scrollTop.value = e.detail.scrollTop
}
const switchTab = (index: number) => {
  activeIndex.value = index
  scrollViewTop.value = scrollTop.value
  nextTick(() => {
    scrollViewTop.value = 0
  })
}
// 提取当前二级分类数据
const subCategoryList = computed(() => {
  return categoryList.value[activeIndex.value]?.children || []
})

const isLoading = ref(false)
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getBannerList(), getCategoryTopList()])
  isLoading.value = false
})
</script>

<template>
  <!-- 骨架屏 -->
  <PageSkeleton v-if="isLoading" />
  <view class="viewport" v-else>
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">衬衫</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in categoryList"
          :key="item.id"
          :class="['item', { active: index === activeIndex }]"
          @tap="switchTab(index)"
        >
          <text class="name"> {{ item.name }} </text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view
        class="secondary"
        scroll-y
        enable-back-to-top
        :scroll-top="scrollViewTop"
        @scroll="onScroll"
      >
        <!-- 焦点图 -->
        <XtxSwiper :list="bannerList" />
        <!-- 内容区域 -->
        <view class="panel" v-for="item in subCategoryList" :key="item.id">
          <view class="title">
            <text class="name">{{ item.name }}</text>
            <navigator class="more" hover-class="none">全部</navigator>
          </view>
          <view class="section">
            <navigator
              v-for="goods in item.goods"
              :key="goods.id"
              class="goods"
              hover-class="none"
              :url="`/pages/goods/goods?id=${goods.id}`"
            >
              <image class="image" :src="goods.picture" />
              <view class="name ellipsis">{{ goods.name }}</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ goods.price }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/category.scss';
</style>
